طراحی بصری UI و Backends با AWS Amplify Studio [ویدئو]

سرفصل ها و درس ها

مقدمه Introduction

• معرفی دوره Course Introduction

• درباره مربی About Instructor

• پیش نیازهای دوره Course Prerequisites

Amplify Studio و Amplify CLI - مقدمه Amplify Studio and Amplify CLI - Introduction

• Amplify and Amplify Studio و And Amplify CLI چیست What's Amplify and Amplify Studio and And Amplify CLI

• مزایا و قابلیت های استودیو را تقویت کنید Amplify Studio Advantages and Capabilities

• Amplify Studio Pricing Amplify Studio Pricing

راه اندازی محیط توسعه Development Environment Setup

• راه اندازی محیط توسعه - بررسی اجمالی Setup Development Environment - Overview

• راه اندازی ابزار توسعه Development Tools Setup

• راه اندازی Amplify CLI Setting up Amplify CLI

راه اندازی Sandbox برای Amplify Studio The Launch Sandbox for Amplify Studio

• راه اندازی Sandbox - راه اندازی یک مدل Sandbox Data و React App Launch Sandbox - Setting up a Sandbox Data model and React App

• Setup React - ایجاد Todo Setup React - Create Todo

• پرس و جو و نمایش کارها Querying and Showing Todos

• یک Todo را به روز کنید Update a Todo

• یک Todo را حذف کنید Delete a Todo

AWS Amplify Studio - یک برنامه Fullstack React بسازید AWS Amplify Studio - Build a Fullstack React App

• شروع به کار با برنامه Fullstack - Petstore Getting Started with the Fullstack App - Petstore

• راه اندازی Git Repo Setup Git Repo

• [اختیاری] مبانی Git [Optional] Git Basics

• ایجاد برنامه Fullstack ما با Amplify Studio - Creating and Seeding Data Model Creating our Fullstack app with Amplify Studio - Creating and Seeding Data Model

• اجزای Figma و React Figma and React Components

• راه اندازی Figma و ویرایش کامپوننت و همگام سازی Setting up Figma and Editing a Component and Syncing

• اتصال UI به مدل داده Binding UI to Data Model

• راه اندازی React App و Pull Components Setup React App and Pull Components

• نمایش مجموعه حیوانات خانگی و به‌روزرسانی مؤلفه Showing our Pet Collection and Updating the Component

ویژگی‌های مؤلفه رابط کاربری و کنترل‌کننده‌های رویداد UI Component Properties & Event Handlers

• ویژگی های مؤلفه - نمای کلی Component Properties - Overview

• ویرایش و افزودن خواص به کامپوننت ها Editing and Adding Properties to the Components

• کامپوننت PetProfile را سفارشی کنید Customize PetProfile Component

• افزودن Delete Event از طریق Studio - Delete Item Adding Delete Event via Studio - Delete Item

نوار نوار و پاورقی - Hands-On The Navbar and Footer - Hands-On

• افزودن نوار ناوبری و پاورقی Adding a Navbar and Footer

• افزودن Props - Width - به Navbar و Footer Components Adding Props - Width - to Navbar and Footer Components

• گسترش کد مولفه تولید شده Extending Generated Component Code

• ارسال React Props به کامپوننت ها Passing React Props to Components

• Props را لغو کنید Override Props

• گسترش اجزای تولید شده از طریق Overrides Prop - افزودن رویداد در کد Extending Generated Components via Overrides Prop - Adding Event In Code

• افزودن تصویر لوگو در Amplify Studio Adding Logo Image in Amplify Studio

• اضافه کردن تصویر لوگو در کد Adding Logo Image in Code

• Style و Action را به AddPet اضافه کنید Add Style and Action to AddPet

فرم حیوان خانگی را اضافه کنید Add Pet Form

• افزودن فرم حیوان خانگی - نمای کلی Add Pet Form - Overview

• ایجاد فرم افزودن حیوان خانگی Creating the Add Pet Form

• سبک دادن به فرم Styling the Form

• پنهان کردن و نمایش فرم Hiding and Showing Form

• فیلدها را با داده تنظیم کنید و یک حیوان خانگی را ذخیره کنید Setup Fields with Data and Save a Pet

• بستن فرم AddPet Closing the AddPet Form

جزئیات حیوان خانگی Pet Details

• جزئیات حیوان خانگی - بررسی اجمالی Pet Details - Overview

• تنظیم جزئیات حیوان خانگی ارائه آن در برنامه Setup Pet Details Rendering it in the App

• نمایش داده های حیوان خانگی در کارت جزئیات Show Pet Data on the Details Card

• تنظیم دکمه بستن جزئیات Setting up the Details Close Button

پت را به روز کنید Update Pet

• به روز رسانی حیوان خانگی - بررسی اجمالی Update Pet - Overview

• راه اندازی به روز رسانی UI Setting up Update UI

• به روز رسانی حیوان خانگی Updating the Pet

احراز هویت با AWS Amplify Studio Authentication with AWS Amplify Studio

• احراز هویت - نمای کلی Authentication - Overview

• دکمه Signout را در نوار ناوبری تنظیم کنید Setup the Signout Button in the Navbar

• افزودن احراز هویت به برنامه ما Adding Authentication to our App

• افزودن Signout و نمایش تصویر نمایه کاربر Adding Signout and Showing User Profile Image

• اضافه کردن نام کاربری به نوار نوار - تمرین Add Username to Navbar - Exercise

• راه حل: اضافه کردن نام کاربری به نوار ناوبری Solution: Adding Username to Navbar

مجوز در AWS Amplify Studio Authorization in AWS Amplify Studio

• بررسی اجمالی مجوز Authorization Overview

• قوانین مجوز مالک را تنظیم کنید Set Owner Authorization Rules

• حالت مجوز را روی Cognito User Pool تنظیم کنید و DynamoDB را برای فیلد مالک بررسی کنید Set Authorization Mode to Cognito User Pool and Check DynamoDB for Owner Field

• یک قانون مجوز خصوصی تنظیم کنید Set a Private Authorization Rule

• ایجاد گروه و تنظیم یک قانون مجوز گروه Create Group and Set a Group Authorization Rule

• تنظیم قانون مجوز عمومی Set Public Authorization Rule

ذخیره سازی با AWS Amplify Studio Storage with AWS Amplify Studio

• ذخیره سازی فایل با AWS Amplify Studio File Storage with AWS Amplify Studio

AWS Amplify Studio Content Management AWS Amplify Studio Content Management

• مدیریت محتوا - بررسی اجمالی Content Management - Overview

• مدیریت محتوا Content Management

Amplify Hosting - میزبانی برنامه ما Amplify Hosting - Hosting our App

• میزبانی برنامه ما با Amplify Hosting Hosting our App with Amplify Hosting

پاک کن Clean up

• پاک کن Clean up

مراحل بعدی Next Steps

• مراحل بعدی Next Steps